<template>
  <a-card title="批量设置可补考课程">
    <div class="table-operations">
      <a-button type="primary" @click="showImportModal">导入课程数据</a-button>
      <a-button @click="handleBatchSet" :disabled="!selectedRowKeys.length">批量设为可补考</a-button>
    </div>
    
   <a-table
     :columns="columns"
     :dataSource="courseData"
     :rowSelection="{ selectedRowKeys, onChange: onSelectChange }"
     rowKey="courseId" 
     :pagination="false"
   >
      <template slot="makeupStatus" slot-scope="text, record">
        <a-tag :color="record.makeupStatus ? 'green' : 'red'">
          {{ record.makeupStatus ? '可补考' : '不可补考' }}
        </a-tag>
      </template>
      
      <template slot="action" slot-scope="text, record">
        <a @click="toggleMakeupStatus(record)">{{ record.makeupStatus ? '取消' : '设为' }}可补考</a>
      </template>
    </a-table>
    
    <a-modal
      title="导入课程数据"
      :visible="importModalVisible"
      @ok="handleImport"
      @cancel="importModalVisible = false"
    >
      <a-upload-dragger
        name="file"
        :multiple="false"
        :beforeUpload="beforeUpload"
        :fileList="fileList"
      >
        <p class="ant-upload-drag-icon">
          <a-icon type="inbox" />
        </p>
        <p class="ant-upload-text">点击或拖拽文件到此处上传</p>
        <p class="ant-upload-hint">支持Excel文件，包含课程ID、课程名称、学年学期等信息</p>
      </a-upload-dragger>
    </a-modal>
  </a-card>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '课程ID', dataIndex: 'courseId' },
        { title: '课程名称', dataIndex: 'courseName' },
        { title: '学年学期', dataIndex: 'academicTerm' },
        { title: '学分', dataIndex: 'credit' },
        { title: '补考状态', scopedSlots: { customRender: 'makeupStatus' } },
        { title: '操作', scopedSlots: { customRender: 'action' } }
      ],
      courseData: [
        {
          courseId: 'C001',
          courseName: '高等数学（上）	',
          academicTerm: '2022-2024-1',
          credit: 4,
          makeupStatus: true
        },
        {
          courseId: 'C002',
          courseName: 'PLC与工业控制技术',
          academicTerm: '2022-2024-1',
          credit: 3,
          makeupStatus: false
        },
        {
          courseId: 'C003',
          courseName: '数据结构',
          academicTerm: '2022-2024-1',
          credit: 4,
          makeupStatus: true
        },
        {
          courseId: 'C004',
          courseName: '计算机组成原理',
          academicTerm: '2022-2024-1',
          credit: 3,
          makeupStatus: false
        }
      ],
      selectedRowKeys: [],
      importModalVisible: false,
      fileList: []
    }
  },
  
  methods: {
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    
  toggleMakeupStatus(record) {
    const index = this.courseData.findIndex(item => item.courseId === record.courseId);
    if (index !== -1) {
      const newData = [...this.courseData]; // 创建新数组
      newData[index] = { ...newData[index], makeupStatus: !newData[index].makeupStatus };
      this.courseData = newData; // 替换整个数组
      this.$message.success('操作成功');
    }
  },
    
   handleBatchSet() {
     this.courseData = this.courseData.map(item => {
       if (this.selectedRowKeys.includes(item.courseId)) {
         return { ...item, makeupStatus: true }; // 返回新对象
       }
       return item;
     });
     this.$message.success('批量设置成功');
     this.selectedRowKeys = [];
   },
    
    showImportModal() {
      this.importModalVisible = true
    },
    
    beforeUpload(file) {
      this.fileList = [file]
      return false
    },
    
    handleImport() {
      if (!this.fileList.length) {
        this.$message.warning('请选择文件')
        return
      }
      
      // 模拟导入数据
      const newCourse = {
        courseId: `C00${this.courseData.length + 1}`,
        courseName: '新导入课程',
        academicTerm: '2022-2024-2',
        credit: 2,
        makeupStatus: false
      }
      
      this.courseData.push(newCourse)
      this.$message.success('导入成功')
      this.importModalVisible = false
      this.fileList = []
    }
  }
}
</script>

<style scoped>
.table-operations {
  margin-bottom: 16px;
}
.table-operations > button {
  margin-right: 8px;
}
</style>